import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './index.module.less';
import GameInfoMask from './GameInfoMask';
import socket from '@/socket';
import { useRecoilState } from 'recoil';
import { PLAY_DATA, PLAY_SETTING, RoundDetailState } from '../../state';
import clsx from 'clsx';
import {
  playButtonClickSound
} from '@/utils/sound';

const TopCom = () => {
  const [rateState, setRateState] = useState('');
  const [rateWidth, setRateWidth] = useState(0);
  const [mineList, setMineList] = useState([]);
  const [step, setStep] = useState(0);
  const [gameInfoMaskMaskVisible, setGameInfoMaskVisible] = useState(false);
  const [isAutoPlay, setIsAutoPlay] = useState(false);
  const [roundDetail, setRoundDetailState] = useRecoilState(RoundDetailState);
  const [PLAY_DATAState,] = useRecoilState(PLAY_DATA);
  const [PLAY_SETTINGState,] = useRecoilState(PLAY_SETTING);

  useEffect(() => {
    if (Array.isArray(mineList) && mineList.length) {
      // console.log(PLAY_DATAState, 'PLAY_DATAStatePLAY_DATAStatePLAY_DATAState');
      const { useLattice = [], autoPlayRound } = PLAY_DATAState;
      // 几颗雷
      const { mines = 1, isAutoPlay, amount } = PLAY_SETTINGState;
      setStep(useLattice.length);
      let currentStep = 0;
      if (useLattice.length === 0) {
        currentStep = 0;
      } else {
        currentStep = Math.floor(useLattice.length / (25 - mines) * 100);
      }
      setRateWidth(currentStep);

      let rate = 0.00;

      if (isAutoPlay) {
        rate = (mineList[mines - 1].multiplier[useLattice.length - 1] * amount).toFixed(2);
      } else {
        rate = (mineList[mines - 1].multiplier[useLattice.length] * amount).toFixed(2);
      }

      if (isAutoPlay && autoPlayRound === 0) {
        setRoundDetailState({});
      }

      setIsAutoPlay(isAutoPlay);

      setRateState(rate);
    }
  }, [PLAY_DATAState, mineList, PLAY_SETTINGState])

  // useEffect(() => {
  //   const { isAutoPlay } = PLAY_SETTINGState;
  //   const { autoPlayRound } = PLAY_DATAState;

  //   // console.log(autoPlayRound, 'autoPlayRound');


  // }, [PLAY_SETTINGState, PLAY_DATAState]);


  useEffect(() => {
    const SETTLE_RESULTlisten = (msg: Msg) => {
      setRoundDetailState({});
    };
    const BET_RESULTlisten = (msg: Msg) => {
      setRoundDetailState(msg.body || {});
    };
    const BET_RULE_RESULTlisten = (msg: Msg) => {
      setMineList(JSON.parse(msg.body) || [])
    };

    const BET_AND_SETTLE_RESULTlisten = (msg: Msg) => {
      setRoundDetailState(msg.body || {});
    };

    socket.listen(['SETTLE_RESULT'], SETTLE_RESULTlisten);
    socket.listen(['BET_RESULT'], BET_RESULTlisten);
    socket.listen(['BET_RULE_RESULT'], BET_RULE_RESULTlisten);
    socket.listen(['BET_AND_SETTLE_RESULT'], BET_AND_SETTLE_RESULTlisten);
    return () => {
      socket.unListen(SETTLE_RESULTlisten);
      socket.unListen(BET_RESULTlisten);
      socket.unListen(BET_RULE_RESULTlisten);
      socket.unListen(BET_AND_SETTLE_RESULTlisten);
    };
  }, []);

  return (
    <div className={styles.TopCom}>
      <div className={styles.title}>
        MINES
      </div>
      <div className={styles.flexLine}>
        <div className={styles.greenBlock} onClick={() => {
          setGameInfoMaskVisible(true);
          playButtonClickSound();
        }}>
          Game&nbsp;ID:&nbsp;
          <span className={styles.text}>{roundDetail?.orderNo || ''}</span>
          <i className={styles.icon}></i>
          {
            !!roundDetail?.orderNo ? <div className={styles.laser} /> : ''
          }
        </div>
        <div className={clsx(styles.yellowBlock, isAutoPlay && styles.greenShow)}>
          {
            isAutoPlay ? 'Payout' : 'Next'
          }
          :&nbsp;{step === 0 && isAutoPlay ? 0 : rateState}₹
        </div>
      </div>
      <div className={styles.borderLine}>
        <div className={styles.innerLine} style={{ width: `${rateWidth}%` }}>

        </div>
      </div>
      <GameInfoMask
        visible={gameInfoMaskMaskVisible}
        onClose={() => setGameInfoMaskVisible(false)}
      />
    </div>
  );
};

export default TopCom;